<template>
    <div class="record-warrp">
      <div class="record-left">
        <div class="record-img">
          <img src="" alt="" />
          <h3>江玮</h3>
          <hr />
          东海市
  
          <p style="writing-mode: vertical-rl; font-size: 20px; margin-top: 30px">
            当前材料:
          </p>
  
          <p
            style="
              writing-mode: vertical-rl;
              font-size: 20px;
              color: red;
              margin-top: 5px;
              height: 200px;
            "
          >
            1999年制干部履历表
          </p>
        </div>
      </div>
      <div class="record-center">
        <el-input v-model="textValue"></el-input>
        <el-row :gutter="20">
          <el-col :span="5">
            <el-row style="position: relative">
              <el-col
                :span="25"
                style="overflow: auto; width: 100%; background-color: #fff"
                :style="{ height: heightTree }"
              >
                <el-tree
                  ref="tree"
                  style="margin-left: 10px; margin-top: 5px; margin-bottom: 5px"
                  :data="treeData"
                  node-key="id"
                  :props="defaultProps"
                  highlight-current
                  @node-click="handleNodeClick"
                  :current-node-key="currentNodekey"
                ></el-tree>
                <!-- :default-expanded-keys="[treeData[0].children[0]]" -->
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
             <el-card style="float:left;width:200px;text-align:center" :style="{ height: heightY }"  class="box-card">
               {{textValue}}
            </el-card>
          </el-col>
          <el-col :span="15">
            <div class="thumbnail" :style="{ height: heightY }">
              <div class="image-container" v-for="(cityItem,index) in images" :key=index>
                  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                    <el-checkbox :key="cityItem.id" :label="cityItem.id"></el-checkbox>
                  </el-checkbox-group>
                  <img
                    :src="cityItem.src"
                    :style="{
                      width: '140px',
                      height: '200px',
                      border: index === selectedImageIndex ? '2px solid red' : '',
                    }"
                    @click="selectImage(index)"
                  />
              </div>
              <!-- <div class="checkbox-container">
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="(cityItem) in images" :key="cityItem.id" :label="cityItem.id"></el-checkbox>
                </el-checkbox-group>
              </div> -->
            </div>
            <div class="bigPicture" :style="{ height: heightY }">
              <img
                :src="
                  selectedImageIndex !== null
                    ? images[selectedImageIndex].src
                    : ''
                "
                alt=""
                style="width: 100%; height: 100%"
              />
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="record-rigth">
        <button class="buttonOne">全屏</button>
        <button class="buttonOne">上一页</button>
        <button class="buttonOne">下一页</button>
      </div>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        heightY: window.innerHeight - 145 + "px",
        heightTree: window.innerHeight - 140 + "px",
        tabPosition: "left",
        imagesOne: [
          {
            src: "https://img2.baidu.com/it/u=870159714,3719145608&fm=253&fmt=auto&app=138&f=JPEG?w=351&h=500",
            id:"001",
            fileName:"4-1-1-001.jpg",
          },
          {
            src: "https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
            id:"002",
            fileName:"4-1-1-002.jpg",
          },
          {
            src: "https://img2.baidu.com/it/u=55994022,1030234355&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
            id:"003",
            fileName:"4-1-1-003.jpg",
          },
          {
            src: "https://img2.baidu.com/it/u=1330959003,1248282479&fm=253&fmt=auto&app=120&f=JPEG?w=450&h=780",
            id:"004",
            fileName:"4-1-1-004.jpg",
          },
          {
            src: "https://img0.baidu.com/it/u=1886047342,1826501707&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
            id:"005",
            fileName:"4-1-1-005.jpg",
          },
          {
            src: "https://img2.baidu.com/it/u=1368879157,3680317647&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
            id:"006",
            fileName:"4-1-1-006.jpg",
          },
          {
            src: "https://img0.baidu.com/it/u=1880899726,3824907986&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
            id:"007",
            fileName:"4-1-1-007.jpg",
          },
          {
            src: "https://img1.baidu.com/it/u=1582055235,2869528729&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=716",
            id:"008",
            fileName:"4-1-1-008.jpg",
          },
        ],
        imagesTwo:[
        {
            src: "https://img2.baidu.com/it/u=870159714,3719145608&fm=253&fmt=auto&app=138&f=JPEG?w=351&h=500",
            id:"001",
            fileName:"4-1-1-001.jpg",
          },
          {
            src: "https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
            id:"002",
            fileName:"4-1-1-002.jpg",
          },
          {
            src: "https://img2.baidu.com/it/u=55994022,1030234355&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
            id:"003",
            fileName:"4-1-1-003.jpg",
          },
          {
            src: "https://img2.baidu.com/it/u=1330959003,1248282479&fm=253&fmt=auto&app=120&f=JPEG?w=450&h=780",
            id:"004",
            fileName:"4-1-1-004.jpg",
          },
          {
            src: "https://img0.baidu.com/it/u=1886047342,1826501707&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
            id:"005",
            fileName:"4-1-1-005.jpg",
          },
          {
            src: "https://img2.baidu.com/it/u=1368879157,3680317647&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
            id:"006",
            fileName:"4-1-1-006.jpg",
          },
          {
            src: "https://img0.baidu.com/it/u=1880899726,3824907986&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
            id:"007",
            fileName:"4-1-1-007.jpg",
          },
          {
            src: "https://img1.baidu.com/it/u=1582055235,2869528729&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=716",
            id:"008",
            fileName:"4-1-1-008.jpg",
          },
        ],
        images:[],
        treeData: [
          {
            id: "01",
            parentId: "ZA",
            name: "一、履历材料",
            spell: null,
            children: [
              {
                id: "168",
                parentId: "01",
                name: "干部履历表",
                spell: null,
                children: null,
                data: null,
                flag: "1",
                relationState: null,
                isPart: null,
              },
            ],
            data: null,
            flag: "0",
            relationState: null,
            isPart: null,
          },
          {
            id: "02",
            parentId: "ZA",
            name: "二、自传材料",
            spell: null,
            children: [
              {
                id: "169",
                parentId: "02",
                name: "个人小结",
                spell: null,
                children: null,
                data: null,
                flag: "1",
                relationState: null,
                isPart: null,
              },
            ],
            data: null,
            flag: "0",
            relationState: null,
            isPart: null,
          },
          {
            id: "03",
            parentId: "ZA",
            name: "三、鉴定、考核材料",
            spell: null,
            children: [
              {
                id: "68",
                parentId: "03",
                name: "2017年度考核登记表",
                spell: null,
                children: null,
                data: null,
                flag: "1",
                relationState: null,
                isPart: null,
              },
              {
                id: "69",
                parentId: "03",
                name: "2018年度考核登记表",
                spell: null,
                children: null,
                data: null,
                flag: "1",
                relationState: null,
                isPart: null,
              },
              {
                id: "70",
                parentId: "03",
                name: "2019年度考核登记表",
                spell: null,
                children: null,
                data: null,
                flag: "1",
                relationState: null,
                isPart: null,
              },  
            ],
            data: null,
            flag: "0",
            relationState: null,
            isPart: null,
          },
        ],
        // cities: images,
        checkedCities:[],
        defaultProps:{
          children: "children",
          label: "name",
        },
        selectedImageIndex: 0,
        currentNodekey:"",
        isIndeterminate: true,
        checkAll:false,
        textValue:"",
        oneselfData:[],
        cityItemIdAll:[],
      };
    },
    created(){
        const contrast = this.imagesOne.filter(obj1 => this.imagesTwo.find(obj2 => obj1.id === obj2.id));
        console.log(contrast,"contrast");
        this.images = contrast;
    },
    methods: {
      selectChange() {},
      selectImage(index) {
        this.selectedImageIndex = index;
      },
      handleNodeClick(data){
        console.log(data,"data");
        this.oneselfData = [data];
        
      },
       // 全选
    handleCheckAllChange(val) {
      this.valueFlag = val;
      if(this.rowItem == null){
        this.$message({
          message: '请先选择授权人员',
          type: 'warning'
        });
      }else{
        if (val) {
          this.checkedCities = this.imageData.map(item => item.elecId);
          console.log(this.checkedCities,"checkedCit")
          this.checkAll=true;
          let textsToAdd = []; // 存放需要添加到this.textValue中的文本
          this.textValue = '';
          this.checkedCities.forEach((imageId) => {
            const image = this.imageData.find(item => item.elecId === imageId);
            if (image) {
              this.oneselfData.forEach((item) => {
                let text = `${item.name}_${image.fileName.replace(".jpg", "")}`;
                textsToAdd.push(text);
              });
            }
          });
          // 将textsToAdd数组中的每一个文本添加到this.textValue中
          textsToAdd.forEach((text) => {
            this.textValue += text + ",";
          });
          this.isIndeterminate = false;
        } else {
          this.checkedCities = [];
          this.textValue = ""; // 清空文本值
        }
      }
    },
      handleCheckedCitiesChange(value) {
        console.log(value,"123")
        // value里面存的值为什么不能是4-1-1-001而是001呢？
          let textsToAdd = []; // 存放需要添加到this.textValue中的文本
          let textsToRemove = []; // 存放需要从this.textValue中删除的文本
          this.oneselfData.forEach((item) => {
            this.images.forEach((image) => {
              if (value.includes(image.id)) {
                let text = `${item.name}-${image.fileName.replace(".jpg", "")}`;
                textsToAdd.push(text);
              } else {
                let text = `${item.name}-${image.fileName.replace(".jpg", "")}`;
                textsToRemove.push(text);
              }
            });
          });
          // 遍历this.textValue中的每一行文本，如果包含要删除的文本，则删除
          textsToRemove.forEach((text) => {
            if (this.textValue.includes(text)) {
              this.textValue = this.textValue.replace(text + "\n", "");
            }
          });
          // 遍历textsToAdd数组中的每一个文本，如果不在this.textValue中，则添加
          textsToAdd.forEach((text) => {
            if (!this.textValue.includes(text)) {
              this.textValue += text + "\n";
            }
          });
          console.log(this.textValue,"textValue")
      },
    },
  };//点击勾选fileName和name拼接正常，但是勾选完之后取消勾选this.textVlaue上的内容还在，这点应该怎么做
  </script>
  <style scoped lang="less">
  .record-warrp {
    display: flex;
    width: 100%;
    height: 100%;
  
    .record-left {
      width: 400px;
      height: 100%;
    }
    .record-img {
      width: 200px;
      height: 120px;
      border: 1px solid #ccc;
      border-radius: 10px;
    }
    .record-center {
      width: 1200px;
      height: 100%;
    }
    .record-rigth {
      width: 400px;
      height: 100%;
      margin-top: 300px;
    }
  }
  .record-center /deep/.el-input__inner{
    width: 1200px;
    height: 100px;
    margin-bottom: 10px;
  }
  
  .el-menu-item {
    margin-top: 5px;
  }
  .thumbnail {
    width: 200px;
    overflow-y: scroll;
    float: left;
    // display: flex;
  }
  .image-container {
    // flex: 1;
    display: flex;
    padding-right: 0.521vw;
    margin-top: 5px;
    justify-content: space-around;
    padding-right: 10px;
  }
  
  // .checkbox-container {
  //   flex: 1;
  // }
  //   .image-container /deep/.el-checkbox{
  //   width: 140px;
  //   height: 204px;
  // }
    .image-container /deep/.el-checkbox__label{
    display:none;
  }
  .bigPicture {
    float: left;
    width: 500px;
  }
  
  
  .buttonOne {
    background: #009ae8;
    width: 80px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #ccc;
    color: #fff;
    display: grid;
    line-height: 50px;
    text-align: center;
    margin-left: 170px;
    margin-top: 5px;
  }
  </style>
  
  
  
  
  <!-- //////////////////////////////////////////////////////////////
  // handleCheckedCitiesChange(value,cityItemId) {
  //   this.cityItemIdAll = [{cityItemId}]
  //   if (value == false) {
  //     this.cityItemIdAll = []; // 清空cityItemIdAll里面的值
  //   }
  //   console.log(this.cityItemIdAll,"12333"); //不管点击勾选还是取消勾选cityItemIdAll都是有值的这个是不是有问题啊
  //   let checkedCount = this.cityItemIdAll.length;
  //   // 遍历treeData数组
  //   this.oneselfData.forEach((item) => {
  //     this.cityItemIdAll.forEach((value)=>{
  //       let image = this.images.find((img) => img.id === value.cityItemId);
  //       if (image) {
  //         // 拼接name和fileName，并去掉后缀名".jpg"
  //         let text = `${item.name}-${image.fileName.replace(".jpg", "")}`;
  //         this.textValue += text + "\n";
  //       }
  //     })
  //     // 查找与当前选中的value对应的image对象
  //   });
  //   if(this.cityItemIdAll.length == 0){
  //     this.textValue = "";
  //   }
  //   // this.checkAll = checkedCount
  //   // this.isIndeterminate = checkedCount > 0
  //   // console.log(this.isIndeterminate,"????");
  //   // if (!this.isIndeterminate) {
  //   //   this.textValue = ""; // 清空this.textValue
  //   // }
  // },
  ///////////////////////////////////////////////////////////////// -->
  